<style type="text/css">
    #win-wallet-edit, #win-bankcard-edit{display: none;padding:16px 16px 0 0;}
    .layui-input-block{margin-left: 130px;}
    .layui-form-radio{width: 110px;}
    .layui-form-radio>i:hover, .layui-form-radioed>i {color: #108ee9;}
    .layui-form-radio * {font-size: 12px;}
    .layui-form-select dl dd.layui-this {background-color: #108ee9;color: #fff;}
    .layui-form-label{width: 100px;}
</style>

<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    h2 {
        margin-bottom: 20px;
    }
    #container {
        width: 500px;
        text-align: center;
        margin: 0 auto;
        font-family: "微软雅黑";
        margin-top: 50px;
    }
    .selectContainer {
        position: relative;
    }
    .selectInput {
        width: 99%;
        height: 40px;
        border-style: none;
        border: 1px solid #999;
        border-radius: 3px;
        padding: 0 3px;
    }
    .picture_click {
        background: url(img/select-default.png) no-repeat;
        opacity: 1;
        width: 15px;
        height: 8px;
        position: absolute;
        top: 10px;
        right: 125px;
    }
    .picture_click:hover {
        background-image: url(img/select-hover.png);
    }
    .selectList {
        width: 206px;
        height: 212px;
        overflow-y: scroll;
        text-align: left;
        margin: 0 172px;
        border: 1px solid #999;
        display: none;
        position: relative;
    }
    .selectList div {
        cursor: pointer;
    }
</style>

<div id="win-wallet-edit" style="display: none">
    <form class="layui-form" lay-filter="win-wallet-edit" action="">
        <input type="hidden" name="id" value="">
        <input type="hidden" name="accountType" value="wallet">
        <div class="layui-form-item">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" maxlength="30" required  lay-verify="required" placeholder="用于个人速记识别,不填则默认为账户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">钱包账号</label>
            <div class="layui-input-block">
                <input type="text" name="accountNo" maxlength="30" required  lay-verify="required" placeholder="友利钱包账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账户名</label>
            <div class="layui-input-block">
                <input type="text" name="accountName" maxlength="30" required  lay-verify="required" readonly="readonly" placeholder="友利钱包户名,输入钱包账号后自动加载户名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="隐藏按钮1">
        </div>
    </form>
</div>
<div id="win-bankcard-edit" style="display: none">
    <form class="layui-form" lay-filter="win-bankcard-edit" action="">
        <input type="hidden" name="id" value="">
        <input type="hidden" name="accountType" value="bankCard">
        <div class="layui-form-item">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" maxlength="30" required  lay-verify="required" placeholder="用于个人速记识别" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">户名</label>
            <div class="layui-input-block">
                <input type="text" name="accountName" maxlength="30" required  lay-verify="required" placeholder="银行开户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">银行卡号</label>
            <div class="layui-input-block">
                <input type="text" name="accountNo" maxlength="30" required  lay-verify="required|number" placeholder="银行卡号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属银行</label>
            <div class="layui-input-block">
                <!--<select name="bankEnglishLetters" lay-verify="required" id="bank">-->
                <!--<option value="ICBC">中国工商银行</option>-->
                <!--#for(bank : banks)-->
                <!--<option value="#(bank.shortEnName)">#(bank.bankName)</option>-->
                <!--#end-->
                <!--</select>-->
                <input type="text" list="cityList" class="selectInput" name="bankName" id="bankName" required  lay-verify="required"
                       value="" maxlength="90" placeholder="请输入银行名称" autocomplete="off" class="layui-input" onfocus="fuzzySearch.call(this)">

                <div class="picture_click dropDowns" style=""></div>
                <div id="cityList" class="selectList">
                    #for(bank : banks)
                    <div id="#(bank.shortEnName)">#(bank.bankName)</div>
                    #end
                </div>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开户支行名称</label>
            <div class="layui-input-block">
                <input type="text" name="openingBankName" maxlength="100" required  lay-verify="required" placeholder="开户支行名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">个人(对私)/公司(对公)</label>
            <div class="layui-input-block">
                <input type="radio" name="isCompany" value="0" title="个人" checked>
                <input type="radio" name="isCompany" value="1" title="公司">
            </div>
        </div>

        <div class="layui-form-item" id="area-picker">
            <label class="layui-form-label">省份/城市</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="province" class="province-selector" data-value="" lay-filter="province">
                        <option value="">请选择省(公司账户必填)</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" class="city-selector" data-value="" lay-filter="city">
                        <option value="">请选择市(公司账户必填)</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="隐藏按钮2">
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    //初始化下拉框
    initSearchInput();

    function fuzzySearch(e) {
        var that = this;
        //获取列表的ID
        var listId = $(this).attr("list");
        //列表
        var list = $('#' + listId + ' div');
        //列表项数组  包列表项的id、内容、元素
        var listArr = [];
        //遍历列表，将列表信息存入listArr中
        $.each(list, function(index, item){
            var obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
            listArr.push(obj);
        })

        //current用来记录当前元素的索引值
        var current = 0;
        //showList为列表中和所输入的字符串匹配的项
        var showList = [];
        //为文本框绑定键盘引起事件
        $(this).keyup(function(e){
            //如果输入空格自动删除
            this.value=this.value.replace(' ','');
            //列表框显示
            $('#' + listId).show();
            if(e.keyCode == 38) {
                //up
                console.log('up');
                current --;
                if(current <= 0) {
                    current = 0;
                }
                console.log(current);
            }else if(e.keyCode == 40) {
                //down
                console.log('down');
                current ++;
                if(current >= showList.length) {
                    current = showList.length -1;
                }
                console.log(current);

            }else if(e.keyCode == 13) {
                //enter
                console.log('enter');
                //如果按下回车，将此列表项的内容填充到文本框中
                $(that).val(showList[current].innerHTML);
                //下拉框隐藏
                $('#' + listId).hide();
            }else {
                //other
                console.log('other');
                //文本框中输入的字符串
                var searchVal = $(that).val();
                showList = [];
                //将和所输入的字符串匹配的项存入showList
                //将匹配项显示，不匹配项隐藏
                $.each(listArr, function(index, item){
                    if(item.eleName.indexOf(searchVal) != -1) {
                        item.ele.style.display = "block";
                        showList.push(item.ele);
                    }else {
                        item.ele.style.display = 'none';
                    }
                })
                console.log(showList);
                current = 0;
            }
            //设置当前项的背景色及位置
            $.each(showList, function(index, item){
                if(index == current) {
                    item.style.background = "#eee";
                    $('#' + listId).scrollTop(item.offsetTop);
                }else {
                    item.style.background = "";
                }
            })
            //设置下拉框的高度
            //212为列表框的最大高度
            if(212 > $('#' + listId + ' div').eq(0).height() * showList.length) {
                $('#' + listId).height($('#' + listId + ' div').eq(0).height() * showList.length);
            }else {
                $('#' + listId).height(212);
            }
        })
    }

    function initSearchInput() {
        //给下拉箭头绑定点击事件  点击下拉箭头显示/隐藏对应的列表
        //输入框的类名为selectInput
        //下拉箭头的类名为picture_click、dropDowns
        //下拉列表的类名为selectList
        for(var i = 0; i < $('.picture_click').length; i++) {
            $('.picture_click').eq(i).click(function(){
                $(this).parent().find('.selectList').toggle();
            })
        }
        //为列表中的每一项绑定鼠标经过事件
        $('.selectList div').mouseenter(function(){
            $(this).css("background", "#eee").siblings().css("background", "");
        });
        //为列表中的每一项绑定单击事件
        $('.selectList div').click(function(){
            //文本框为选中项的值
            $(this).parent().parent().find('.selectInput').val($(this).html());
            //下拉框隐藏
            $(this).parent().hide();
        });

        //点击下拉框外部的时候使下拉框隐藏
        var dropDowns = document.getElementsByClassName('dropDowns');
        var selectList = document.getElementsByClassName('selectList');
        document.body.onclick = function(e){
            e = e || window.event;
            var target = e.target || e.srcElement;
            for(var i = 0; i < dropDowns.length; i++) {
                if(target != dropDowns[i] && target != selectList[i]){
                    selectList[i].style.display = 'none';
                }
            }
        }
    }
</script>
